<template>
  <div>
    <el-button
      v-if="!!processType && addBtnUseable"
      icon="el-icon-plus"
      size="small"
      @click="addApprovalNode"
      circle
    ></el-button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "InsertButton",
  data() {
    return {};
  },
  computed: {
    ...mapState(['processType', 'addBtnUseable']),
    selectedNode() {
      return this.$store.state.selectedNode;
    },
  },
  methods: {
    addApprovalNode() {
      if (this.processType) {
        this.$emit("insertNode", "APPROVAL");
      }
    }
  },
};
</script>

<style lang="less" scoped>
.node-select {
  div {
    display: inline-block;
    margin: 5px 5px;
    cursor: pointer;
    padding: 10px 15px;
    border: 1px solid #f8f9f9;
    background-color: #f8f9f9;
    border-radius: 10px;
    width: 130px;
    position: relative;
    span {
      position: absolute;
      left: 65px;
      top: 18px;
    }
    &:hover {
      background-color: #fff;
      box-shadow: 0 0 8px 2px #d6d6d6;
    }
    i {
      font-size: 25px;
      padding: 5px;
      border: 1px solid #dedfdf;
      border-radius: 14px;
    }
  }
}
</style>
